<template>
  <div class="app-container">
    <el-row :gutter="20" style="height: 100%;margin-left:0;margin-right: 0;">
      <el-col :span="3" :xs="24" class="treeMenu" style="padding-left: 0;padding-right: 0;">
        <el-tabs type="border-card" v-model="activeName">
<!--          <el-tab-pane name="menu">-->
<!--            <span slot="label"><i class="el-icon-tickets"></i></span>-->
<!--            <el-menu style="padding: 0"-->
<!--                     default-active="1"-->
<!--                     class="el-menu-vertical"-->
<!--                     @open="handleOpen"-->
<!--                     @close="handleClose">-->
<!--              <el-menu-item :index="i.id" v-for="i in treeMenu">-->
<!--                <i :class="i.icon"></i>-->
<!--                <span>{{ i.name }}</span>-->
<!--              </el-menu-item>-->
<!--            </el-menu>-->
<!--          </el-tab-pane>-->
          <el-tab-pane name="tree" v-if="treeData.length>0">
            <span slot="label"><i class="el-icon-document"></i></span>
            <dynamic-tree
              :treeData="treeData"
              @handleNodeClick="handleNodeClick">
            </dynamic-tree>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="21" :xs="24" style="padding-left: 0;padding-right: 0;">
        <!--        <el-row class="page-title">-->
        <!--          <el-dropdown v-if="toolbarData.length>4">-->
        <!--            <span class="el-dropdown-link">-->
        <!--              <i class="el-icon-menu"></i>-->
        <!--              <i class="el-icon-arrow-down"></i>-->
        <!--            </span>-->
        <!--            <el-dropdown-menu slot="dropdown">-->
        <!--              <el-dropdown-item v-for="(btn, key) in toolbarData" v-if="btn.status==='1'" @click="clickEvent(btn.type,btn.url)">{{ btn.name }}</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--          </el-dropdown>-->
        <!--          <div class="flex" v-if="toolbarData.length<=4">-->
        <!--            <template v-for="(btn, key) in toolbarData">-->
        <!--              <el-button-->
        <!--                v-if="btn.status==='1'"-->
        <!--                :type="btn.styleType"-->
        <!--                :icon="btn.icon"-->
        <!--                size="mini"-->
        <!--                @click="clickEvent(btn.type,btn.url)"-->
        <!--              >{{ btn.name }}-->
        <!--              </el-button>-->
        <!--            </template>-->
        <!--          </div>-->
        <!--        </el-row>-->

        <div class="mainContent">
          <div class="manage-header">
            <el-form :inline="true" :model="queryParams" ref="queryForm" label-width="auto" @submit.native.prevent>

              <el-form-item v-if="searchFormData.length!=0 && searchFormData[0].status === '1'" :key="searchFormData[0].prop" :label="searchFormData[0].name">
                <el-input size="small" v-model="queryParams[searchFormData[0].prop]" :placeholder="'请输入' + searchFormData[0].name"></el-input>
              </el-form-item>

              <el-form-item  v-if="searchFormData.length!=0">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button v-if="searchFormData.length>1" icon="el-icon-arrow-down" size="mini" id="more-attr" @click="moreattr">更多属性</el-button>
              </el-form-item>

              <div id="more-list" style="display: none;">
                <el-form-item v-for="item in searchFormData.slice(1)" :key="item.prop" :label="item.name" v-if="item.status === '1'">
                  <!--根据type来显示是什么标签-->
                  <el-select v-model="queryParams[item.prop]" placeholder="请选择" v-if="item.componentType === 'el-select'">
                    <el-option v-for="item in item.optionValue" :key="item.value" :label="item.label" :value="item.value"
                    ></el-option>
                  </el-select>

                  <el-date-picker v-model="queryParams[item.prop]" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                                  type="daterange"
                                  range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                  v-if="item.componentType === 'el-date-picker'"
                  ></el-date-picker>

                  <el-input size="small" v-model="queryParams[item.prop]" :placeholder="'请输入' + item.name" v-else></el-input>
                </el-form-item>
              </div>
            </el-form>
<!--            <dynamic-search-form inline :formData="formData" :form="listQuery" @postForm="postData"></dynamic-search-form>-->
          </div>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <template v-for="(btn, key) in operates.list">
                <el-button
                  v-if="btn.status==='1' && btn.location==='2'"
                  :type="btn.styleType"
                  :icon="btn.icon"
                  size="mini"
                  @click="clickEvent(btn.type,btn.url)"
                  v-hasPermi="['pms:type:add']"
                >{{ btn.name }}
                </el-button>
              </template>
            </el-col>
            <el-popover title="列筛选" trigger="click" style="float: right;margin-right: 10px;">
              <el-checkbox-group v-model="checkedColumns" size="mini">
                <el-checkbox style="display: block;" v-for="(item,index) in tableData" :key="item.name"
                             :label="item.name"
                             @change="chickBoxGroupChange(item)"
                >{{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
              <el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu"></i></el-button>
            </el-popover>
          </el-row>

          <el-row v-if="tableData.length>0">
            <!--列表数据-->
            <dynamic-table :list="list" @handleSelectionChange="handleSelectionChange" :options="options"
                           :columns="tableData" :operates="operates">
            </dynamic-table>
            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dynamicSearchForm from '@/views/components/dynamicSearchForm'
import dynamicTable from '@/views/components/dynamicTable'
import dynamicTree from '@/views/components/dynamicTree'
import {getDataList, getConfigInfo,getTreeData,getFileList} from '@/api/dynamic/dynamicDetails'

export default {
  components: {
    dynamicSearchForm,
    dynamicTable,
    dynamicTree
  },
  data() {
    return {
      activeName: 'tree',
      // 遮罩层
      // 加载层信息
      loading: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      pageTitle: '',
      options: {// table 的参数
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true // 是否支持列表项选中功能
      },
      params:{},
      dataInfo: null,
      toolbarData: [],
      searchFormData: [],
      tableData: [],
      treeMenu: [],
      treeData: [],
      commandData:[],
      list: [],
      checkedColumns: [],
      columns: [],// 需要展示的列
      operates: {// 列操作按钮
        width: 150,
        list: []
      },
      queryConfigParams: {},
      queryTreeParams: {},
      fileUrl:undefined,
      queryParams: {
        pageNum:1,
        pageSize: 10,
        objectId:undefined
      },
      allData:[]
    }
  },
  created() {
    let params = this.$route.query;
    if(typeof params.pageParams == 'string'){
      this.params=params=JSON.parse(sessionStorage.getItem('api_child'+this.$route.params.Id));
      this.$route.meta.breadcrumb = params.breadcrumb
    }else{
      params.breadcrumb = this.$route.meta.breadcrumb
      sessionStorage.setItem('api_child'+this.$route.params.Id,JSON.stringify(params));
      this.params=params;
    }
    if(params.pageParams && params.rowParams){
      this.dataInfo = params.rowParams;
      this.queryConfigParams.command = params.pageParams.treeCommand;
      this.queryConfigParams.treeMenu = params.pageParams.treeMenu;
      this.getConfig();
    }else{
      this.msgError("缺少参数");
      return false;
    }
  },
  methods: {
    /** 获取配置信息 */
    getConfig() {
      this.loading = true;
      getConfigInfo(this.queryConfigParams).then(response => {
        this.commandData = response.data.commandData;
        //this.treeMenu = response.data.treeMenuData;
        this.loading = false;
        var treeInfo = {};
        treeInfo.id = this.params.rowParams.id;
        treeInfo.label = this.params.rowParams.name;
        treeInfo.children = [];
        treeInfo.url = this.commandData[0].url;
        treeInfo.pageParams = this.commandData[0].pageParams;
        this.treeData.push(treeInfo);
        var url = this.getUrl(this.params.pageParams.url);
        this.getTree(url);
        this.handleNodeClick(treeInfo);
      })
    },
    getTreeConfig() {
      this.loading = true;
      getConfigInfo(this.queryTreeParams).then(response => {
        this.tableData = response.data.tableData;
        this.searchFormData = response.data.searchFormData;
        this.operates.list = response.data.commandData;
        this.loading = false;
      })
    },
    /** 获取树形数据 */
    getTree(url) {
      this.loading = true;
      getTreeData(url).then(response => {
        if (response.code == '0') {
          // this.treeData[0].children.push(this.handleTree(response.rows, "id"));
          response.data.forEach((item,index)=>{
            response.data[index]=this.normalizer(item);
          });
          let TreeData=this.handleTree(response.data, "id");
          this.treeData[0].children=TreeData;
          // response.data.forEach((item, index, array) => {
          //   let treeInfo = {};
          //   treeInfo.id = item.id;
          //   treeInfo.label = item.name;
          //   treeInfo.url = this.commandData[1].url;
          //   treeInfo.pageParams = this.commandData[1].pageParams;
          //   treeInfo.children=
          //   this.treeData[0].children.push(treeInfo);
          // });
          this.loading = false;
        }
      });
    },
    /** 转换数据结构 */
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        parentId: node.parentId,
        url : this.commandData[1].url,
        pageParams : this.commandData[1].pageParams
      };
    },
    /** 获取列表数据 */
    getList() {
      const loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var begin=this.queryParams.pageNum*this.queryParams.pageSize-this.queryParams.pageSize;
      var end=this.queryParams.pageNum*this.queryParams.pageSize;
      this.list=[];
      if(this.allData.length>0){
        this.list = this.allData.slice(begin, end);
        loading.close();
      }else{
        getDataList(this.fileUrl,this.queryParams).then(response => {
          this.allData = response.data;
          this.list = this.allData.slice(begin, end);
          this.total = response.total;
          loading.close();
        })
      }
      // getFileList(this.fileUrl,this.queryParams).then(response => {
      //   if (response.code == '0') {
      //     this.list=response.data;
      //     this.total=response.total;
      //   }
      //   loading.close();
      // });
      // this.loading.close();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    //查询按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      this.handleQuery();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickEvent() {

    },
    // 节点单击事件
    handleNodeClick(data) {
      // let pageParams =eval ("(" + data.pageParams + ")");
      let pageParams =JSON.parse (data.pageParams.replace(/'/g,'"'));
      if(pageParams.command!=='' && pageParams.command!==undefined){
        this.queryTreeParams.command=pageParams.command;
      }
      if(pageParams.table!=='' && pageParams.table!==undefined){
        this.queryTreeParams.table=pageParams.table;
      }
      if(pageParams.form!=='' && pageParams.form!==undefined){
        this.queryTreeParams.form=pageParams.form;
      }
      this.getTreeConfig();
      var url = data.url;
      if (url.indexOf("{") != -1) {
        var substr1 = url.substring(url.indexOf("?") + 1, url.indexOf("="));
        var substr2 = url.substring(url.indexOf("{") + 1, url.indexOf("}"));
        url = url.substring(0, url.indexOf("?"));
        this.queryParams[substr1]=data[substr2];
      }
      this.allData=[];
      this.fileUrl=url;
      this.getList();
    },

    //控制列显示
    chickBoxGroupChange(item) {
      item.show = !item.show
    },
    // 打开加载层
    openLoading() {
      const loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  margin: 0;
  padding: 0;
}

.treeMenu {
  background-color: #f8f8f8;
  height: 100%;
  position: fixed;
}
.treeMenu .el-tabs--border-card{
  height: 100%;
}
.app-container .head-container {
  padding-left: 5px;
  padding-right: 5px;
  border-top: 1px solid #d8d8d8;
}

.el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.page-title {
  background: #fff;
  border: 1px solid #D8D8D8;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  /*margin-bottom: 5px;*/
}

.headerContent {
  float: left;
  padding: 20px 0 10px;
  width: 100%;
}

.extendedHeader {
  display: block;
  line-height: 23px;
  white-space: nowrap;
}

.extendedHeader.name {
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.content {
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedHeader.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex {
  display: flex;
}

.infinite-list {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.infinite-list-item {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #f8f8f8;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.infinite-list-item.selected {
  list-style: none;
  padding: 5px;
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

.el-dropdown {
  padding: 10px;
  border-right: 1px solid #C3C3C3;
}

.mainContent {
  float: left;
  width: 100%;
  padding: 0 5px;
}

.extendedMain {
  display: block;
  line-height: 23px;
  white-space: nowrap;
}

.extendedMain.name {
  font-size: 16px;
  font-weight: bold;
  font-family: "3dsregular", Arial, Helvetica, sans-serif;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.extendedMain.content {
  font-size: 13px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
}

.extendedMain.fromTitle {
  font-size: 13px;
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 5px 0 5px 10px;
  background-color: #f8f8f8;
}
//去掉最上级的before  after 即是去电最上层的连接线
  /deep/ .el-tree > div {
&::before {
   display: none;
 }
&::after {
   display: none;
 }
}
</style>
